<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link href="css/swiper-5.4.5/swiper.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <link href="css/my.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">
    <link href="css/notice.css" rel="stylesheet">
    <style>
        [v-cloak]{
            display: none;
        }

        .left-box{
            width: 100%;
            height: 400px;
            background-color: #FFFFFF;
        }

        .right-box{
            width: 100%;
            height: 400px;
            background-color: #FFFFFF;
        }
        .right-box li{
            padding: 10px 40px;
        }

        .img-item-box{
            width: 100%;
            height: 90px;
            margin-top: 10px;
        }

        .praise{
            cursor: pointer;
            font-size: 20px;
            margin-left: 10px;
        }

        .count-group{
            margin-left: 20px;
        }
        .count-group button{
            width: 30px;
            background-color: #FFFFFF;
            border: 1px solid #cccccc;
            cursor: pointer;
        }
        .count-group span{
            padding: 0 5px;
            border: 1px solid#cccccc;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <!-- 头部-->
    <div style="width: 100%; height: 60px;line-height: 60px;background-color: #333333">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div style="color: #b3d8ff;font-size: 20px;">电动甄选</div>
                </div>
                <div class="col-md-4" style="text-align: right;color: #EEEEEE;"v-if="user.name">
                    <span style="color: #b3d8ff;margin-right: 20px;">{{user.name}}</span>
                    <a style="color: #EEEEEE" href="javascript:void (0)"@click="logout">退出</a>

                </div>
                <div v-else class="col-md-4"style="text-align: right;">
                    <a style="color: #EEEEEE;margin-right: 10px;" href="/end/page/login.html" target="_blank">登录</a>
                    <a style="color: #EEEEEE" href="/end/page/register.html" target="_blank">注册</a>

                </div>
            </div>
        </div>
    </div>

    <!--导航-->
    <div class="container" style="margin: 5px auto">
        <div style="width: 100%;height: 50px;line-height: 50px">
            <div class="col-md-12">
                <div class="row">
                    <ul style="display: flex;">
                        <li class="nav-item"><a href="index.html">首页</a> </li>
                        <li class="nav-item"><a href="noticeInfo.html">公告</a> </li>
                        <li class="nav-item"><a href="videoInfo.html">新能源介绍</a> </li>
                        <li class="nav-item"><a href="richTextInfo.html">汽车详细信息</a> </li>
                        <li class="nav-item"><a href="messageInfo.html">论坛</a> </li>
                        <li class="nav-item"><a href="cartInfo.html">购物车</a> </li>
                        <li class="nav-item"><a href="orderInfo.html">订单</a> </li>
                        <li class="nav-item"><a href="commentInfo.html">评价</a> </li>
                        <li class="nav-item"><a href="javascript:void(0);"@click="personalPage">个人信息</a> </li>
                        <li class="nav-item" v-if="isShow"><a href="/end/page/index.html" target="_blank">进入后台系统</a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--主题开始-->
    <div class="container">
        <div class="row">
            <div class="col-md-3">
            <div class="left-box">
                <div style="width: 100%;height: 300px;">
                    <img id="main-img-id" style="width: 100%;height: 100%;" :src="mainSrc">
                </div>
                <ul class="img-item-box">
                    <li v-for="id in fileIds" class="col-md-3">
                        <img style="width: 100%;height: 100%;" :src="'/files/download/'+id" @mouseover="mouseOver(id)">
                    </li>
                </ul>
            </div>
            </div>
            <div class="col-md-7">
                <div class="right-box">
                    <ul>
                        <li>
                            <span class="right-title">{{goodsInfo.name}}</span>
                            <i class="fa fa-thumbs-o-up praise" @click="hotClick()">
                                <span style="margin-left: 3px;font-size: 12px;">{{goodsInfo.hot}}</span>
                            </i>
                        </li>
                        <li>描述：<span style="color: red;margin-left: 20px;">{{goodsInfo.description}}</span> </li>
                        <li>价格：<span style="color: red;margin-left: 20px;">{{goodsInfo.price}}￥</span> </li>
                        <li>促销：<span style="color: red;margin-left: 20px;">{{goodsInfo.discount}}</span> </li>
                        <li>数量：
                            <span class="count-group">
                                <button @click="changeCount('-')">-</button>
                                <span id="count-id" style="margin: 0 5px;">1</span>
                                 <button @click="changeCount('+')">+</button>

                            </span>
                            <span style="margin-left: 10px; color: #666666;">库存<span id="store-id">{{goodsInfo.count}}</span> </span>
                        </li>
                        <li>
                            <button class="btn btn-info" @click="addCart()">加入购物车</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div style="background-color: white;min-height: 300px;">
                <div style="width: 100%;height: 50px;background-color: #dddddd;line-height: 50px;margin: 30px 0">
                    <span style="font-weight: bold;margin-left: 20px;font-size: 16px;">商品评价({{totalComments}})</span>
                </div>
                <div id="comment-content">
                    <div v-for="item in comments"class="row">
                        <div class="col-md-1" style="text-align: right">{{item.userName}}</div>
                        <div class="col-md-10">
                            <div class="row"style="padding: 0 40px">
                                <div class="col-md-12" style="text-align: justify;">{{item.content}}</div>
                                <div class="col-md-12" style="text-align: right;margin-top: 10px;">
                                    <span style="color: #888888">{{item.createTime}}</span>
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/swiper-5.4.5/swiper.min.js"></script>
<script src="js/vue2.6.11/axios.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>
<script src="js/my.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.metisMenu.js"></script>
<script>
    new Vue({
        el:'#wrapper',
        data:{
            user: {},
            isShow: false, //是否显示进入后台管理
            goodsId: 0,   //当前商品的ID主键
            goodsInfo: {}, //当前商品对象
            fileIds: [],   //当前商品的图片列表
            mainSrc: '',   //当前商品的主图片
            comments:[],  //评价列表
            totalComments: 0, //共有多少条评价
        },
        created: function (){
            axios.get("/auth").then(res =>{
               if(res.data.code==='0'){
                   this.user = res.data.data;
                   if (this.user.level !== 3){
                       this.isShow = true;
                   }
               }
            });
           this.goodsId =this.getQueryVariable('goodsId');
            this.loadGoodsInfo();
            this.loadComments();



        },

        methods:{
            logout(){
                axios.get("/logout").then(res =>{
                    if(res.data.code==='0'){
                        location.href ='/front/index.html'
                    }
                });
            },

            //获取传来的参数
            getQueryVariable: function (variable) {
                let query = window.location.search.substring(1);
                let vars = query.split("&");
                for (let i=0;i<vars.length;i++){
                    let pair = vars[i].split("=");
                    if (pair[0] === variable){
                        return pair[1];
                    }
                }
            },

            //获取当前的商品信息
            loadGoodsInfo(){
                axios.get("/goodsInfo/"+this.goodsId).then(res =>{
                    if (res.data.code ==='0'){
                        this.goodsInfo = res.data.data;
                        this.mainSrc = '/front/img/goods/默认图片.jpg';
                        if (this.goodsInfo.fileIds){
                            let fileIds = JSON.parse(this.goodsInfo.fileIds);
                            //截取前四个展示
                            if (fileIds.length>4){
                                fileIds =fileIds.splice(0,4);
                            }
                            this.fileIds = fileIds;
                            if(fileIds.length){
                                this.mainSrc = '/files/download/'+fileIds[0];
                            }

                        }
                        this.goodsInfo.discount = this.goodsInfo.discount < 1 ? this.goodsInfo.discount * 10 + "折" : "-";
                    }
                });
            },

            //获取当前商品的评价信息
            loadComments(){
                axios.get("/commentInfo/all/"+this.goodsId).then(res => {
                    if (res.data.code === '0') {
                        this.comments = res.data.data;
                        this.totalComments = this.comments.length;
                    }
                });
            },

            mouseOver(id){
                $('#main-img-id').attr('src','/files/download/'+id);
            },

            //点赞数+1
            hotClick(){
                axios.put('/goodsInfo',{id: this.goodsId,hot:1}).then(res=>{

                    if (res.data.code === '0'){
                        alert("点赞+1")
                        this.loadGoodsInfo();
                    }else {
                        alert(res.data.msg);
                    }
                });
            },

            //购买数量的增减
            changeCount(type){
                let $count = $('#count-id');
                let $store = $('#store-id');
                let count = parseInt($count.text());
                let store = parseInt($store.text());
                if(type ==="+"){
                    count = count<store?count+1:store;
                }else {
                    count = count ===1?1:count-1;
                }
                $count.text(count);

            },

            //加入购物车
            addCart(){
                if (!this.user.name){
                    alert('请先登录');
                    return
                }
                let userId = this.user.id;
                let $count = $("#count-id");
                let count = parseInt($count.text());
                if (this.goodsId){
                    let data = {userId: userId,level: this.user.level,goodsId:this.goodsId,count:count};
                    axios.post('/cartInfo',data).then(res =>{
                        if (res.data.code === '0'){
                            alert('加入成功');
                        }else {
                            alert(res.data.msg);
                        }
                    });
                }
            }


        }
    });
</script>
</body>
</html>